<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
	   <script type="text/ecmascript" src="../../../js/context-menu.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
	<script>
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<style>
		.contextMenu {
			font-size: 18px;
		}
	</style>
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Context Menu for Rows</title>
	
</head>
<body>
<span style="margin-left:18px; font-family: Tahoma">Mouse over the grid and click right button to activate the context menu</span>
    <br /><br />
<div style="margin-left:20px">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
    <div class="contextMenu row" id="contextMenu" style="display:none;">
        <ul >
            <li id="add">
                <span class="glyphicon glyphicon-plus" style="float:left"></span>
                <span style="font-size:100%; font-family:Verdana;margin-left:10px;">Add Row</span>
            </li>
            <li id="edit">
                <span class="glyphicon glyphicon-pencil" style="float:left"></span>
                <span style="font-size:100%; font-family:Verdana;margin-left:10px;">Edit Row</span>
            </li>                
            <li id="del">
                <span class="glyphicon glyphicon-trash" style="float:left"></span>
                <span style="font-size:100%; font-family:Verdana;margin-left:10px;">Delete Row</span>
            </li>                
        </ul>
    </div>

    <script type="text/javascript"> 
    
        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'data.json',
                datatype: "json",
                colModel: [
					{ label: 'Category Name', name: 'CategoryName', width: 75 },
					{ label: 'Product Name', name: 'ProductName', width: 90 },
					{ label: 'Country', name: 'Country', width: 100 },
					{ label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
					{ label: 'Quantity', name: 'Quantity', width: 80, sorttype: 'number' }                   
                ],
                width: 780,
                height: 200,
                rowNum: 150,
                pager: "#jqGridPager",
                gridComplete: initGrid
            });
        });

        function initGrid() {
            $(this).contextMenu('contextMenu', {
				menuStyle :{
					width : "150px"
				},
                bindings: {
                    'edit': function (t) {
                        alert("Edit Row Command Selected");
                    },
                    'add': function (t) {
                        alert("Add Row Command Selected");
                    },
                    'del': function (t) {
                        alert("Delete Row Command Selected");
                    }
                },
                onContextMenu: function (event, menu) {
                    var rowId = $(event.target).parent("tr").attr("id")
                    var grid = $("#jqGrid");
                    grid.setSelection(rowId);

                    return true;
                }
            });
        }

    </script>

    <!-- This code is related to code tabs -->
    <br />
    <span style="margin-left:18px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
    <br /><br />
    <div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
     
    <script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="../../../css/prettify.css" />
        <script type="text/ecmascript" src="../../../js/codetabs-b.js"></script>
    
    <script type="text/javascript">

        var tabData =
            [
                { name: "HTML", url: "index.html", lang: "lang-html" },
                { name: "Data.JSON", url: "data.json", lang: "lang-json" },
				{ name: "Description", url: "description.html", lang: "lang-html" }
            ];

        codeTabs(tabData);

    </script>
<!-- UserVoice JavaScript SDK (only needed once on a page) -->
<script>(function(){var uv=document.createElement('script');uv.type='text/javascript';uv.async=true;uv.src='//widget.uservoice.com/rcvhj5YKDooi4s2ffVrYKg.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(uv,s)})()</script>

<!-- The Classic Widget will be embeded wherever this div is placed -->
<div data-uv-inline="classic_widget" data-uv-mode="feedback" data-uv-primary-color="#cc6d00" data-uv-link-color="#007dbf" data-uv-forum-id="275128" data-uv-width="100%" data-uv-height="550px"></div>
</body>
</html>